
<script>

import list_remote from './mixin/list_remote'
export default {
  name: 'select_auto',
  mixins: [list_remote],
  render: function (h) {
    return this._mainRender(h)
    // let loadh = h('el-button', { props: { type: "primary", loading: true }, }, [this.$tt('tip_loading_data')])
    // let warnh = h('el-button', {
    //   props: { type: "warning", },
    //   on: {
    //     click: () => {
    //       this.remoteObj = { componentLoading: true }
    //       this._getRemoteData()
    //     }
    //   }
    // }, [this.warnning, h('i', { class: 'el-icon-refresh el-icon--right' })])
    // return this.componentLoading ? loadh : this.warnning ? warnh : this._mainRender(h)

  },
  data() {
    return {
      remoteQueryValue: null,
    }
  },
  props: {
    value: null,
    pageScroll: {
      type: Boolean,
      default: false,
    },
    remote: {
      type: Boolean,
      default: false,
    },
    remoteQuery: {
      type: [String, Function],
      default: null,
    },
    attrs: Object,
    currentLabel: "",

  },
  watch: {
    currentLabel: function (val) {
      this.$nextTick(() => {
        if (this.$refs.main) {
          this.$refs.main.selectedLabel = val
        }
      })
    },
  },
  mounted() {
    if (this.currentLabel) {
      this.$nextTick(() => {
        if (this.$refs.main) {
          this.$refs.main.selectedLabel = this.currentLabel
        }
      })
    }
    // const dropdownDom = this.$refs.main.$el.querySelector('.el-select-dropdown__wrap')
    // dropdownDom.addEventListener('scroll',function(e){
    //   console.log(`${e.scrollHeight}${e.scrollTop}`)
    // })
    // console.log(dropdownDom)
    // dropdownDom.addEventListener('scroll', function (e) {
    // console.log(e, this.scrollHeight - this.scrollTop, this.clientHeight)
    // const condition = this.scrollHeight - this.scrollTop <= this.clientHeight + 20

    // })
  },
  computed: {
    storeDataUse: function () {
      return _.isEmpty(_.trim(this.remoteQueryValue))
    },
    _useList: function () {
      return this.storeData && this.storeDataUse ? this._storeList : _.isEmpty(this.innerList) ? this.items : this.innerList
    },
  },

  methods: {
    _emitValue(value, list) {
      if (!list) list = ['input', 'change', 'changeItem']
      list.forEach(key => {
        if (key == 'changeItem') {
          if (value instanceof Array) {
            this.$emit(key, value.map(v => _.find(this._actualList, (it) => it == v || it._value == v)))
          } else {
            this.$emit(key, _.find(this._actualList, (it) => it == value || it._value == value))
          }
        } else {
          this.$emit(key, value)
        }
      })

    },
    _childItemProps(it, i) {
      let label = it._label
      let value = it._value
      let key = this.$attrs['value-key'] ? value[this.$attrs['value-key']] : value

      return { props: { disabled: !!it.disabled, label, value }, key }
    },
    _remoteMethod: _.debounce(function (query) {
      let params = {}
      if (this.remoteQuery instanceof Function) {
        params = this.remoteQuery(query)
      } else if (this.remoteQuery) {
        params[this.remoteQuery] = query
      }
      this.remoteQueryValue = query
      this.remoteObj = { params, dataLoading: true }
      this._getRemoteData({ remoteParams: true, setIntoData: true })
    }, 700),
    _mainRender(h) {
      let props = Object.assign({
        remote:this.remote,
        remoteQuery:this.remoteQuery,
        value: this.value, loading: this.dataLoading, 'no-data-text': this.warnning || this.$tt('tip_no_data'),
        clearable: false, placeholder: this.$tt('tip_please_select'),
      }, this.$attrs, this.attrs)


      let list = this._actualList
      let on_add = {}
      if (this.$listeners.changeItem) on_add.change = (v) => {
        this._emitValue(v, ['change', 'changeItem'])
      }


      if (props.remote && !props['remote-method']) {
        props['remote-method'] = this._remoteMethod
      }
      // let directives = []
      // if (this.pageScroll) {
      //   directives = [
      //     {
      //       name: 'loadMore',
      //       value: '2',
      //     }
      //   ]
      // } 

      const on = Object.assign({}, this.$listeners, on_add)
      const _loadMoreButton = (<el-button disabled={this.dataLoading} class="pd_1 mg_t1 "
        type="" icon="el-icon-more" onClick={this.clickRefresh}>
        {this.$tt("label_load_more")}
      </el-button>)
      const _refreshButton = (<el-button disabled={this.dataLoading} class="pd_1 mg_t1 "
        type="" icon="el-icon-refresh" onClick={this.clickRefresh}>
        {this.$tt("label_refresh")}
      </el-button>)
      const _select_child = []

      if (_.isEmpty(list)) {
        _select_child.push(h('div', {
          slot: "empty", style: "display: flex;flex-direction: column;padding:5px;",
        }, [
          h("div", { class: "el-select-dropdown__empty mg_h1" }, [this.dataLoading ? (<span><i class="el-icon-loading el-icon--left"></i>{this.$tt('label_data_loading')}</span>) : (this.warnning || this.$tt('tip_no_data'))]),
          h("div", { style: "display: flex;flex-direction: row;justify-content: flex-end" }, [this.url ? _refreshButton : null])
        ]))
      }

      _select_child.push(...list.map((it, i) => { return h('el-option', this._childItemProps(it, i)) }))
      if (this.url) {
        _select_child.push((<div class="ex_select_add_refresh_button_div mg_h1" >
          <div></div>
          {_refreshButton}
        </div>))
        props['popper-class'] = "ex_select_add_refresh_button"
      }
      return h('el-select', {
        props, on, ref: 'main',
        // directives,
      }, _select_child)
    },
    clickRefresh(event) {
      event.stopPropagation();
      this._getRemoteData()
    },
  }
}
</script>
<style >
.ex_select_add_refresh_button_div {

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  position: absolute;
  bottom: 5px;
  right: 0px;
  left: 0px;
}

.ex_select_add_refresh_button>.el-scrollbar {
  padding-bottom: 40px;
  overflow-x: hidden;
  overflow-y: auto;
}

.ex_select_add_refresh_button>.el-scrollbar.is-empty {
  padding-bottom: 0px;
  overflow-x: hidden;
  overflow-y: auto;
}

.ex_select_add_refresh_button>.el-scrollbar>.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
